<template>
  <el-dialog
    title="企业微信登录"
    :visible.sync="$attrs.visable"
    width="540px"
    :before-close="handleClose"
  >
    <!-- <div class="noseatbody p-16 br_4">
      <div class="mt-14 bg_fff innerseat flex">
        <i class="el-icon-warning c_primary mr-8 mt-2"></i>
        <div>账户总剩余席位不足，请联系客服开通</div>
      </div>
    </div> -->
    <div>请输入验证码</div>
    <div>请输入企业微信手机端展示的验证码，以继续登录</div>
    <YzmInput ref="yzminput" />
    <!-- <div class="flex inputrow">
      <el-input v-for="(item, index) in verificationCode" :key="index"  type="text" :ref="'yzminput'+index" maxlength="1" v-model.trim.number="verificationCode[index]" @input="handleInput(index)" />
    </div> -->
    <span slot="footer" class="dialog-footer">
      <el-button size="small" type="primary" :loading='verifyloading' @click="handleVerify">验 证</el-button>
    </span>
  </el-dialog>
</template>

<script>
import YzmInput from './YzmInput.vue'
import { setLoginVerifyCode,checkLoginStatus } from '@/api/system/tgwechat'
export default {
  data() {
    return {
      verificationCode: Array(6).fill(''), // 初始化6个空字符串用于输入验证码
      verifyloading:false,
      checkInterval:null,
    };
  },
  components:{
    YzmInput
  },
  props:{
    uuid:{
      type:String,
      default:''
    }
  },
  methods: {

    // handleInput(index) {
    //   // 当输入框的值变化时，如果下一个输入框为空且当前输入不为空，则自动移动到下一个输入框
    //   if (!this.verificationCode[index + 1] && this.verificationCode[index]) {
    //     console.log('123123',`yzminput${index+1}`)
    //     this.$refs[`yzminput${index+1}`].focus()
    //     this.verificationCode[index + 1] = ''; // 创建下一个输入框的空字符串
    //     // this.$refs['yzminput'+(index+1)].focus()
    //     // console.log(this.$refs['yzminput'+(index+1)])
    //   }
    // },

    handleVerify(){
      // if()
      let verifycode = this.$refs.yzminput.aCheckCodeInput.join('')
      if(verifycode){
        this.verifyloading = true
        setLoginVerifyCode({
          uuid:this.uuid,
          code: verifycode
        }).then(()=>{
          this.startCheckingLoginStatus()
          // setTimeout(()=>{
            
          // },3000)
          // this.verifyloading = false
        }).catch(()=>{
          this.verifyloading = false
        })
      }
    },

    startCheckingLoginStatus() {
      this.checkInterval = setInterval(this.checkLoginStatus, 3000); // 每3秒检查一次
    },

    checkLoginStatus(){
      checkLoginStatus({uuid:this.uuid}).then(checkres=>{
        console.log('checkres:', checkres)
        let data = checkres.data
        if(data){
          if(data.status == 103){
            this.$message.error('验证码错误')
            this.stopCheckingLoginStatus()
          }
          if(data.status == 99999){
            this.$emit('success')
            this.handleClose()
            this.$message.success('登录成功')
            this.stopCheckingLoginStatus()
          }
          this.verifyloading = false
        }
      })
    },

    stopCheckingLoginStatus() {
      if (this.checkInterval) {
        clearInterval(this.checkInterval);
        this.checkInterval = null;
      }
    },


    handleClose() {
      //this.$emit("close"); //关闭弹窗;
      if (this.checkInterval) {
        clearInterval(this.checkInterval); // 清除定时器
      }
      this.$emit("update:visable", false);
    },
  },
};
</script>
<style lang="scss" scoped>

.inputrow{
  margin-top: 22px;
  .el-input{
    flex: 1;
    margin: 0 8px;
    ::v-deep .el-input__inner{
      height: 54px;
      line-height: 54px;
      border-radius: 4px;
      border: 0;
      border-radius: 4px;
      background-color: #f2f2f2;
      text-align: center;
      font-size: 22px;
      font-weight: bold;
    }
  }
}
</style>